<template>
    <!-- <a-watermark content="银丰物业智慧管理系统" :disabled="false"> -->
    <a-watermark v-bind="watermarkData" :disabled="false">
        <left-menu-layout key="leftmenu-layout" v-if="layout === 'left'">
            <slot />
        </left-menu-layout>
        <basic-layout key="basic-layout" v-else><slot /></basic-layout>
    </a-watermark>
</template>

<script lang="ts">
    import { defineComponent, reactive } from 'vue';
    import BasicLayout from './basic-layout.vue';
    import LeftMenuLayout from './leftmenu-layout.vue';
    import { injectMenuState } from './use-menu-state';
    import dayjs from 'dayjs';
    import { useUserStore } from '@/store/user';

    export default defineComponent({
        name: 'GlobalLayout',
        setup() {
            const userInfo = useUserStore();
            console.log(userInfo);
            const currentDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
            const watermarkData = reactive({
                content: [`${userInfo.nickname}${userInfo.phone ? '--' + userInfo.phone : ''}`, currentDate],
                font: {
                    fontSize: 16,
                },
                zIndex: 11,
                rotate: -22,
                gap: [150, 150] as [number, number],
            });
            return {
                watermarkData,
                ...injectMenuState(),
            };
        },
        components: {
            BasicLayout,
            LeftMenuLayout,
        },
    });
</script>
